

<!-- 账户余额 -->
<template>
	<view class="content">
		<view class="card">
			<view class="left">
				<view>
					<view class="price">{{ userInfo.ye_num}}</view>
					<view class="detail">账户余额(元）</view>

					<view @click="showBalanceTips()" class="dongJie-Container">
						<view class="dongjie">冻结余额(元）</view>
						<image class="balance" :src="icon.banlanceIcon"></image>
						<view>{{ userInfo.dj_num}}</view>
					</view>
				</view>
			</view>
			<view class="right">
				<view>
					<view>
						<view class="btn borderOneRpx" @click="toDetail()">交易明细</view>
						<view class="btn borderOneRpx" @click="toWithdrawal()">我要提现</view>
					</view>
				</view>
			</view>
		</view>
		<view class="title">充值金额</view>


		<view @click="rechargeIndex = index" v-for="(item, index) in rechargeList" :key="index" class="block">
			<view class="name">
				充
				<text>{{item.crRechargeAmount / 100}}</text>
				元
			</view>
			<view class="send">到账{{(item.crRechargeAmount + item.crGiveAmount) / 100}}元</view>
			<view class="img">
				<image src="/static/images/waterCoupon/sel.png" v-if="index == rechargeIndex"></image>
				<image src="/static/images/waterCoupon/empty.png" @click="rechargeIndex = index" v-else></image>
			<view v-if="item.crGiveLevelName">送{{item.crGiveLevelName}}</view>
			</view>
		</view>
		<view class="block">
			<view class="name-c">
				其他金额
			</view>
			<view class="send-c">
				<view class="input">
					<input v-model="customAmount" :disabled="rechargeIndex != -999" placeholder="自定义充值金额不参与优惠" maxlength="8" type="number" />
				</view>
			</view>
			<view class="img" style="width: 140rpx;">
				<image src="/static/images/waterCoupon/sel.png" v-if="-999 == rechargeIndex"></image>
				<image src="/static/images/waterCoupon/empty.png" @click="rechargeIndex = -999" v-else></image>
			</view>
		</view>

		<button class="add-btn" @click="submitOrder()">立即充值</button>
		<view class="tip"  style="margin-bottom: 116rpx; " @click="toRichtext('5')">充值即代表同意<text>《构购充值协议》</text></view>
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			icon: {
				banlanceIcon: "/static/images/user/balance.png"
			},
			userInfo:{
				sj_num: 0,
				dj_num: 0
			},
			freezeBalanceRemark: "",

			customAmount: '',
			rechargeIndex: 0,
			rechargeList: []
		};
	},
	onShow() {

		let that = this;
		that.$api.globalUtil.requestAjax({
			url: '/AccountBalanceApi/findAccountBalanceByCustomerIdForApi',
			method: 'POST',
			data: {},
			success: function(res) {
				that.userInfo.ye_num = that.changeTwoDecimal_f(res.data.response.moneyBalance / 100);
				that.userInfo.dj_num = that.changeTwoDecimal_f(res.data.response.consumeBalance / 100);
				that.freezeBalanceRemark = res.data.response.freezeBalanceRemark;
			}
		});

		//充值列表查询
		this.rechargeList_fun();
	},
	methods: {
		// 小数后两位，补0
		changeTwoDecimal_f(x) {
			var f_x = parseFloat(x);
			if (isNaN(f_x)) {
				alert('function:changeTwoDecimal->parameter error');
				return false;
			}
			var f_x = Math.round(x * 100) / 100;
			var s_x = f_x.toString();
			var pos_decimal = s_x.indexOf('.');
			if (pos_decimal < 0) {
				pos_decimal = s_x.length;
				s_x += '.';
			}
			while (s_x.length <= pos_decimal + 2) {
				s_x += '0';
			}
			return s_x;
		},
		toWithdrawal(){
			uni.navigateTo({
				url: 'withdrawal'
			});
		},
		toDetail(){
			uni.navigateTo({
				url: '/pagesAccount/waterCoupon/detailed?type=yue'
			})
		},


		// 富文本跳转
		toRichtext(type) {
			uni.navigateTo({
				url: '/pagesUser/userRichtext?type=' + type
			});
		},


		// 充值列表查询
		rechargeList_fun() {

			var that = this;
			that.$api.globalUtil.requestAjax({
				url: '/customerRechargeApi/customerRechargeList',
				method: "POST",
				data: {
					type: 1 //充值类型：1,余额 2,水券
				},
				success: function(res) {
					if(res.data.success) {
						that.rechargeList = res.data.response;
					}
				}
			});
		},
		
		
		//提交订单
		submitOrder() {
			
			// 自定义金额校验
			if(this.rechargeIndex == -999) {
			
				if(!this.customAmount || this.customAmount == 0) {
					this.$api.msg('请输入有效金额');
					return ;
				}
				var isNum = /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/;
				if(!isNum.test(this.customAmount)) {
					this.$api.msg('请输入有效金额');
					return ;
				}
			}
			
			
			let that = this;
			var payModule = "accountBalance";
			var payAmount = 0;
			var payApiUrl = {
				wxPay: "/PayApi/wxPayRechargeForApi",
				aliPay: "/PayApi/alipayRechargeForApi"
			};
			var payData = {
				accountType: 2, //2.余额充值，3.水券充值
				customerInvoiceId: that.invoiceInfo ? that.invoiceInfo.cfId : "",
				cidType: that.invoiceInfo ? that.invoiceInfo.cidType : "",
				cidEmail: that.invoiceInfo ? that.invoiceInfo.ciEmail : ""
			};
			
			payData["aliPayWap"] = "NO";
			payData["aliPayApp"] = "YES";
			
			if(that.rechargeIndex == -999) {
				payAmount = that.customAmount * 100;
				payData["rechargeAccount"] = that.customAmount * 100;
			}else {
				payAmount = that.rechargeList[that.rechargeIndex].crRechargeAmount;
				payData["customerRechargeId"] = that.rechargeList[that.rechargeIndex].crId;
			}
			
			uni.navigateTo({
				url: "/pagesUser/payment?payModule="+payModule+"&payAmount="+payAmount+"&payApiUrl="+JSON.stringify(payApiUrl)+"&payData="+JSON.stringify(payData)
			});
		},
		

		//冻结余额提示
		showBalanceTips() {
			this.$api.msg(this.freezeBalanceRemark);
		}
	}
};
</script>

<style lang="less">
page {
	height: 100%;
	width: 690rpx;
	margin: 0 auto;
	box-sizing: border-box;
}
.content {
	overflow-x: hidden;
}
.card {
	margin-top: 34rpx;
	background-image: url(/static/images/waterCoupon/card.png);
	width: 690rpx;
	height: 260rpx;
	background-size: cover;
	display: flex;
	.left {
		width: 60%;
		height: 100%;
		display: flex;
		align-items: center;
		padding-left: 56rpx;
		.price {
			margin-top: 30rpx;
			color: white;
			font-weight: bold;
			font-size: 56rpx;
		}
		.detail {
			// margin-top: 20rpx;
			color: white;
			font-size: 26rpx;
		}
	}
	.right {
		width: 40%;
		height: 100%;
		display: flex;
		align-items: center;
		flex-direction: row-reverse;
		padding-right: 55rpx;
		.btn {
			color: white;
			font-size: 20rpx;
			width: 114rpx;
			height: 40rpx;
			// border: 1rpx solid #fff;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			white-space: nowrap;
			margin-bottom: 18rpx;

			&.borderOneRpx:after {
				border-width: 4rpx;
				border-radius: 40rpx;
				border-color: #FFFFFF;
			}
		}
	}
}
.title {
	height: 155rpx;
	color: #333333;
	font-size: 30rpx;
	font-weight: bold;
	width: 690rpx;
	border-bottom: 1rpx solid #eeeeee;
	padding-top: 86rpx;
}
.block {
	height: 124rpx;
	border-bottom: 1rpx solid #eeeeee;
	display: flex;
	align-items: center;
	.name {
		font-size: 26rpx;
		width: 203rpx;
		padding-left: 10rpx;
		text {
			font-size: 34rpx;
			font-weight: bold;
		}
	}
	.name-c {
		color: #666666;
		font-size: 26rpx;
		width: 168rpx;
		padding-left: 10rpx;
	}
	.send {
		width: 237rpx;
		color: #d21728;
		font-size: 26rpx;
	}
	.send-c {
		width: 380rpx;
		height: 76rpx;
		color: #333;
		font-size: 26rpx;
		background-color: #F5F5F5;
		border-radius: 5rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		input{
		  width: 307rpx;
		  font-size: 26rpx;
		}
	}
	.img {
		width: 250rpx;
		display: flex;
		align-items: center;
		flex-direction: row-reverse;
		image {
			width: 44rpx;
			height: 44rpx;
			margin-right: 3rpx;
		}
		view{
			color: white;
			font-size: 20rpx;
			width: 118rpx;
			height: 36rpx;
			border-radius: 18rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #FF7E00;
			white-space: nowrap;
			margin-right: 32rpx;
		}
	}
}

	.add-btn {
		z-index: 95;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 600rpx;
		height: 90rpx;
		font-size: 33rpx;
		color: #fff;
		background: linear-gradient(135deg,rgba(210,23,40,1) 0%,rgba(209,4,152,1) 100%);
		border-radius: 45rpx;
		margin-top: 137rpx;
	}
	.tip{
		color: #999999;
		font-size: 24rpx;
		width: 690rpx;
		text-align: center;
		margin-top: 26rpx;
		text{
			color: #E01327;
		}
	}


	//冻结余额
	.dongJie-Container {
		display: flex;
		align-items: center;
		margin-top: 30rpx;
		font-size: 24rpx;
		color: #FFC8C8;

		.balance {
			margin: 0 18rpx 0 10rpx;
			width: 22rpx;
			height: 22rpx;
		}
	}
</style>
